<template>
  <div>
    <a-row :gutter="[16]">
      <a-col :style="{height:'200px', background:'#3333'}"
             :span="6">
        1111
      </a-col>
      <a-col :style="{height:'200px',background:'#FF734c'}"
             :span="
             6">
        2222
      </a-col>
      <a-col :style="{height:'200px',background:'pink'}"
             :span="6">
        3333
      </a-col>
      <a-col :style="{height:'200px',background:'skyblue'}"
             :span="6">
        4444
      </a-col>
    </a-row>
    <a-row style="marginTop:20px">
      <a-col id="chart1"
             :style="{height:'600px'}"
             :span="12">
        col-12
      </a-col>
      <a-col id="chart2"
             :style="{height:'600px'}"
             :span="12">
        col-12
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      chart1: '',
      chart2: ''
    }
  },
  mounted () {
    this.initChart1()
    this.initChart2()
  },
  methods: {
    initChart2 () {
      const chart2 = echarts.init(document.getElementById('chart2'))
      chart2.setOption({
        backgroundColor: '#273454',
        color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}$ ({d}%)',
          textStyle: {
            fontSize: 15
          }
        },
        legend: {
          data: ['A', 'B', 'C', 'D', 'E'],
          orient: 'vertical',
          right: '5%',
          top: '13%',
          top: 'center',
          itemWidth: 20,
          itemHeight: 20,
          itemGap: 30,
          textStyle: {
            color: '#',
            fontSize: 16
          }
        },
        series: [{
          name: 'TITLE',
          type: 'pie',
          clockwise: false,
          startAngle: 90,
          radius: '35%',
          center: ['44%', '50%'],
          hoverAnimation: false,
          roseType: 'radius', // area
          data: [{
            value: 335,
            name: 'A'
          },
          {
            value: 310,
            name: 'B'
          },
          {
            value: 234,
            name: 'C'
          },
          {
            value: 135,
            name: 'D'
          },
          {
            value: 148,
            name: 'E'
          }
          ],
          itemStyle: {
            normal: {
              borderColor: '#273454',
              borderWidth: '5'
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16],
                shadowColor: '#1c1b3a',
                shadowBlur: 1,
                shadowOffsetX: '0',
                shadowOffsetY: '2'
              },
              a: {
                padding: [-35, 15, -20, 5]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          }
        }]
      })
      this.chart2 = chart2
    },
    initChart1 () {
      const chart1 = echarts.init(document.getElementById('chart1'))
      chart1.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            type: 'line',
            data: [23, 40, 36, 56, 8, 45],
            label: {
              show: true,
              formatter: '{c}'
            }
          }
        ]
      })
      this.chart1 = chart1
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
